<template>
  <div>
    <template v-if="item.children&&item.children.length>0">
      <el-submenu :index="item.B_ModuleId" :key="item.B_ModuleId">
        <template slot="title">
          <i :class="item.B_Icon"></i>
          <span class="title-name">{{item.B_FullName}}</span>
        </template>
        <template v-for="child in item.children">
          <!-- 如果子节点还有子节点，这里实现自己递归嵌套 -->
          <SideMenus v-if="child.children&&child.children.length>0" :item="child" :key="child.id" />
          <!-- 子节点没有子节点，直接输出 -->
          <template v-else>
            <!-- 跳链菜单 -->
            <template v-if="!util.validateNull(child.B_UrlAddress)">
              <!-- 外链 -->
              <el-menu-item
                v-if="child.B_UrlAddress.substr(0,1)!== '/'"
                :key="child.id"
                @click="jumpExLink(child.B_UrlAddress)"
              >
                <template slot="title">
                  <i :class="child.B_Icon"></i>
                  <span class="title-name">{{child.B_FullName}}</span>
                </template>
              </el-menu-item>
              <!-- 正常链接 -->
              <el-menu-item v-else :index="child.B_UrlAddress" :key="child.id">
                <template slot="title">
                  <i :class="child.B_Icon"></i>
                  <span class="title-name">{{child.B_FullName}}</span>
                </template>
              </el-menu-item>
            </template>
            <!-- 空链菜单 -->
            <template v-else>
              <el-menu-item :key="child.id">
                <template slot="title">
                  <i :class="child.B_Icon"></i>
                  <span class="title-name">{{child.B_FullName}}</span>
                </template>
              </el-menu-item>
            </template>
          </template>
        </template>
      </el-submenu>
    </template>
    <!-- 没有子节点，直接输出 -->
    <template v-else>
      <!-- 跳链菜单 -->
      <template v-if="!util.validateNull(item.B_UrlAddress)">
        <!-- 外链 -->
        <el-menu-item
          v-if="item.B_UrlAddress.substr(0,1)!== '/'"
          @click="jumpExLink(item.B_UrlAddress)"
        >
          <i :class="item.B_Icon"></i>
          <span slot="title" class="title-name">{{item.B_FullName}}</span>
        </el-menu-item>
        <!-- 正常链接 -->
        <el-menu-item v-else :index="item.B_UrlAddress" :key="item.id">
          <i :class="item.B_Icon"></i>
          <span slot="title" class="title-name">{{item.B_FullName}}</span>
        </el-menu-item>
      </template>
      <!-- 空链菜单 -->
      <template v-else>
        <el-menu-item :key="item.id">
          <i :class="item.B_Icon"></i>
          <span slot="title" class="title-name">{{item.B_FullName}}</span>
        </el-menu-item>
      </template>
    </template>
  </div>
</template>

<script>
export default {
  name: "SideMenus",
  props: {
    item: {
      type: Object,
      required: true
    }
  },
  methods: {
    //外链跳转
    jumpExLink(urlAddress) {
      window.open(urlAddress);
    }
  }
};
</script>

<style lang="less" scoped>
.el-menu-item  i{
  margin-right: 5px;
  width: 24px;
  text-align: center;
  vertical-align: middle;
}
</style>